<template>
  <div style="width: 100%;height: 700px;overflow-y: auto">
    <div class="flex-row-column" style="padding-bottom: 10px;margin-bottom:5px;border-bottom: 1px solid transparent;border-color: rgb(229,230,235);">
      <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">数据模型</div>
      <el-select placeholder="请选择数据模型" style="width: 100%" v-model="throwSetObj.tableName"
      filterable @change="changeTableName" clearable>
        <el-option v-for="item in querySurfaceData" :key="item.TABLE_NAME" :label="item.TABLE_COMMENT" :value="item.TABLE_NAME">
          <div class="flex-row">
            <span style="margin-right: 10px" v-if="item.TABLE_COMMENT">{{ item.TABLE_COMMENT }}</span>
            <span v-if="item.TABLE_COMMENT" style="margin-right: 10px">——</span>
            <span style="color: #8492a6; font-size: 13px">{{ item.TABLE_NAME }}</span>
          </div>
        </el-option>
      </el-select>
    </div>
    <div class="flex-row-column" style="padding-bottom: 10px;margin-bottom:5px;border-bottom: 1px solid transparent;border-color: rgb(229,230,235);">
      <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">模型操作</div>
      <el-select v-model="throwSetObj.modelType" placeholder="请选择模型操作" style="width: 100%" clearable filterable
      @change="branchNameAddList = []">
        <el-option v-for="item in modalHandleList" :key="item.table" :label="item.label" :value="item.table">
          <div class="flex-row">
            <div class="div-label" style="color: rgb(29,33,41);margin-right: 10px">{{item.label}}</div>
            <el-tag size="small">{{item.table}}</el-tag>
          </div>
        </el-option>
      </el-select>
    </div>

<!--    查询单条-->
    <div v-loading="formLoading" :element-loading-text="loadingText" ref="refForm">
      <div style="margin-bottom: 15px" v-if="throwSetObj.modelType == 'GET_ONE' || throwSetObj.modelType == 'SEARCH' || throwSetObj.modelType == 'COUNT'">
        <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">查询条件</div>
        <div></div>
        <div>
          <div style="margin-bottom: 10px" v-if="branchNameAddList.length >= 2">
            <el-select v-model="branchNameToggle" placeholder="请选择查询逻辑">
              <el-option
                v-for="item in ['并且','或']"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </div>
          <div style="margin-bottom: 10px" class="flex-row" v-for="item in branchNameAddList" :key="item.id">
            <div style="margin-right: 10px">
              <el-select v-model="item.key" placeholder="请选择字段" clearable filterable>
                <el-option v-for="item in surfaceSlaveList" :key="item.columnName" :label="item.columnName" :value="item.columnName"></el-option>
              </el-select>
            </div>
            <div style="margin-right: 10px">
              <el-select v-model="item.compare" placeholder="请选择条件公式" filterable clearable>
                <el-option
                  v-for="item in formulaOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="margin-right: 10px">
              <el-input placeholder="请输入值" v-model="item.value" clearable></el-input>
            </div>
            <div @click="delBranchNameAddListItem(item)">
              <i class="el-icon-delete-solid hover-proite" style="color: red"></i>
            </div>
          </div>
          <el-button size="small" type="primary" @click="addBranchNameAddList">增加自定义条件</el-button>
        </div>
      </div>
      <div v-if="throwSetObj.modelType == 'UPDATE' || throwSetObj.modelType == 'ADD' || throwSetObj.modelType == 'DELETE'">
        <div class="flex-row-column margin-ten-15" v-if="throwSetObj.modelType == 'UPDATE' || throwSetObj.modelType == 'DELETE'">
          <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">数据主键</div>
          <div class="flex-row" style="width: 100%">
            <span class="div-label" style="color: rgb(78,89,105);font-size: 16px">id：</span>
            <el-input v-model="throwSetObj.idText"></el-input>
          </div>
        </div>
<!--        <div class="flex-row-column margin-ten-15">-->
<!--          <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">提交数据路径(可选)</div>-->
<!--          <div class="flex-row" style="width: 100%">-->
<!--            <el-input ></el-input>-->
<!--          </div>-->
<!--        </div>-->
        <div class="margin-ten-15">
          <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">自定义额外数据</div>
          <div></div>
          <div>
            <div style="margin-bottom: 10px;width: 100%" class="flex-row" v-for="item in branchNameAddList" :key="item.id">
              <div style="margin-right: 10px;width: 45%">
                <el-select v-model="item.key" placeholder="请选择字段" clearable filterable
                style="width: 100%">
                  <el-option v-for="item in surfaceSlaveList" :key="item.columnName" :label="item.columnName" :value="item.columnName"></el-option>
                </el-select>
              </div>
              <div style="margin-right: 10px;width: 45%">
                <el-input placeholder="请输入参数值" v-model="item.value" clearable></el-input>
              </div>
              <div @click="delBranchNameAddListItem(item)">
                <i class="el-icon-delete-solid hover-proite" style="color: red"></i>
              </div>
            </div>
            <el-button size="small" type="primary" @click="addBranchNameAddList">+ 添加参数</el-button>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 15px" v-if="throwSetObj.modelType == 'GET'">
        <div class="flex-row-column margin-ten-15">
          <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">模型数据主键</div>
          <div class="flex-row" style="width: 100%">
            <span class="div-label" style="color: rgb(78,89,105);font-size: 16px">id：</span>
            <el-input v-model="throwSetObj.idText"></el-input>
          </div>
        </div>
      </div>
      <div v-if="throwSetObj.modelType">
        <div class="div-label" style="color: rgb(78,89,105);margin-bottom: 10px">输出字段变量名</div>
        <el-input placeholder="将模型输出数据流转至上下文" clearable v-model="throwSetObj.output"></el-input>
      </div>
    </div>


  </div>
</template>

<script>
import {querySurfaceList, createId, inquireData} from "@/api/public";
export default {
  name: "DataModalLabelSet",
  data(){
    return {
      querySurfaceData:[],
      modalHandleList:[
        {
          label:'增加数据',
          table:'ADD'
        },
        {
          label:'修改数据',
          table:'UPDATE'
        },
        {
          label:'删除数据',
          table:'DELETE'
        },
        {
          label:'查询数据',
          table:'SEARCH'
        },
        {
          label:'获取单条',
          table:'GET_ONE'
        },
        {
          label:'获取数据总数',
          table:'COUNT'
        },
        {
          label:'获取单个数据',
          table:'GET'
        }
      ],
      formulaOptions:[
        {
          label:'相等',
          value:'eq'
        },
        {
          label:'不相等',
          value:'no_eq'
        },
        {
          label:'大于',
          value:'big'
        },
        {
          label:'大于等于',
          value:'big_eq'
        },
        {
          label:'小于',
          value:'small'
        },
        {
          label:'小于等于',
          value:'small_eq'
        },
        {
          label:'空值',
          value:'null'
        },
        {
          label:'不为空值',
          value:'not_null'
        },
        {
          label:'包含',
          value:'like'
        },
        {
          label:'不包含',
          value:'not_contain'
        }
      ],
      throwSetObj:{
        idText:'',
        tableName:'',
        modelType:'',
        and:null,
        or:null,
        update:null,
        output:'',
        save:null
      },
      branchNameToggle:'并且',
      branchNameAddList:[],
      surfaceSlaveList:[],
      loadingText:'',
      formLoading:false
    }
  },
  created() {
    //请求数据库所有表
    querySurfaceList().then(res => {
      if(res.code == 200){
        this.querySurfaceData = res.data
      }
      else{
        this.querySurfaceData = []
      }
    })
  },
  methods:{
    addBranchNameAddList(){
      createId().then(res => {
        this.branchNameAddList.push({
          key:'',
          compare:'',
          value:'',
          id:res.data
        })
        this.$forceUpdate()
      })

    },
    delBranchNameAddListItem(item){
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ind = this.branchNameAddList.findIndex(result => result.id == item.id)
        if(ind != -1){
          this.branchNameAddList.splice(ind,1)
          if(this.branchNameAddList.length <= 1){
            this.branchNameToggle = '并且'
          }
        }
      })
    },
    //抛出东西
    throwModalData(){
      console.log(this.throwSetObj.modelType,'this.throwSetObj.modelType')
      if(this.branchNameToggle == '并且'){
        this.throwSetObj.and = this.branchNameAddList.length ? this.branchNameAddList : null
      }
      else if(this.branchNameToggle == '或'){
        this.throwSetObj.or = this.branchNameAddList.length ? this.branchNameAddList : null
      }

      if(this.throwSetObj.modelType == 'UPDATE'){
        this.throwSetObj.update = this.branchNameAddList.length ? this.branchNameAddList : null
      }
      else if(this.throwSetObj.modelType == 'ADD'){
        this.throwSetObj.save = this.branchNameAddList.length ? this.branchNameAddList : null
      }
      console.log(this.throwSetObj,'this.throwSetObj')
      return this.throwSetObj
    },
    //选取模型表单后
    changeTableName(value){
      if(!value) return this.surfaceSlaveList = []
      this.branchNameAddList = []
      this.loadingText = '数据表加载中...'
      this.formLoading = true
      inquireData({tableName:value}).then(res => {
        if(res.code == 200){
          this.formLoading = false
          this.surfaceSlaveList = res.data
        }
        else{
          this.formLoading = false
          this.surfaceSlaveList = []
        }
      }).catch(()=>{
        this.formLoading = false
        this.surfaceSlaveList = []
      })

      this.$emit('throwName',value)
    },
    setDataChild(data){
      Object.assign(this.throwSetObj,{
        ...data
      })
      if(this.throwSetObj.and && this.throwSetObj.and.length){
        this.branchNameAddList = this.throwSetObj.and
      }
      else if(this.throwSetObj.or && this.throwSetObj.or.length){
        this.branchNameAddList = this.throwSetObj.or
      }
      if(this.throwSetObj.update && this.throwSetObj.update.length){
        this.branchNameAddList = this.throwSetObj.update
      }
      else if(this.throwSetObj.save && this.throwSetObj.save.length){
        this.branchNameAddList = this.throwSetObj.save
      }
      console.log(this.throwSetObj,'this.throwSetObj-3')
    }
  }
}
</script>

<style scoped>

</style>
